<template>
	<view style="background-color: #fff; ma">
		<view>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" style-type="text"
					active-color="#007aff" @clickItem="onClickItem" />
			</view>
		</view>
		<view class="content" style="background-color: #fff;">
			<view v-if="current==0">
				<uni-list>
					
					<uni-list-item title="客户编号" rightText="右侧文字" />
					<uni-list-item title="订单编号" rightText="右侧文字" />
					<uni-list-item title="客户状态" rightText="右侧文字" />
					<uni-list-item title="客户类型" rightText="右侧文字" />
					<uni-list-item title="客户名字" rightText="右侧文字" />
					<uni-list-item title="客户性别" rightText="右侧文字" />
					<uni-list-item title="联系电话" rightText="右侧文字" />
					<uni-list-item title="身份证号" rightText="右侧文字" />
					<uni-list-item title="楼盘名称" rightText="右侧文字" />
					<uni-list-item title="楼盘地址" rightText="右侧文字" />
					<uni-list-item title="户型" rightText="右侧文字" />
					<uni-list-item title="面积" rightText="右侧文字" />
					
				</uni-list>
			</view>
			
			<view v-if="current==1">
				<uni-card>
				      
					<uni-list>
						<uni-list-item title="客户来源" rightText="右侧文字" />
						<uni-list-item title="设计师" rightText="右侧文字" />
						<uni-list-item title="日期" rightText="右侧文字" />
					</uni-list>
				 </uni-card>    
				 <uni-card>
					<uni-section title="当前状态" type="line">
						<uni-list>
							<uni-list-item title="限单人" rightText="右侧文字" />
							<uni-list-item title="客情描述" rightText="右侧文字" />
							<uni-section title="附件" type="line">
								<view class="example-body">
									<uni-file-picker limit="5" title="最多选择5张图片"></uni-file-picker>
								</view>
						   	</uni-section>
						</uni-list>
					</uni-section> 
					</uni-card>
					<uni-card>
					<uni-section title="当前状态" type="line">
						<uni-list>
						   <uni-list-item title="限单人" rightText="右侧文字" />
						   <uni-list-item title="客情描述" rightText="右侧文字" />
						   <uni-section title="附件" type="line">
						   	<view class="example-body">
						   		<uni-file-picker limit="5" title="最多选择5张图片"></uni-file-picker>
						   	</view>
						   </uni-section>
						</uni-list>
					</uni-section>
				</uni-card>	  
			</view>
			<view v-if="current==2">
				<uni-list>
					<uni-list-item title="是否可量房" rightText="右侧文字" />
					<uni-list-item title="预约量房时间" rightText="右侧文字" />
					<uni-list-item title="实际量房时间" rightText="右侧文字" />
					<uni-list-item title="量房人姓名" rightText="右侧文字" />
					<uni-list-item title="量房描述" rightText="右侧文字" />
				</uni-list>
			</view>
			<view v-if="current == 3">
				<form>
					<view class="form-item">
						<span class="form-item-span">1.上传图纸</span>
					</view>
					<view class="form-item">
						<span class="form-item-span linked">请在电脑端完成上传操作</span>
					</view>
					<view class="form-item">
						<span class="form-item-span">2.图纸报价审核</span>
						<span class="form-item-input">图纸审核中</span>
					</view>
					<view class="form-item">
						<span class="form-item-span" style="color: #999;">审核开始时间</span>
						<span>
							<uni-datetime-picker type="date" :clear-icon="false" 
								v-model="startDate" @maskClick="maskClick" class="date"></uni-datetime-picker>
						</span>
					</view>
					<view class="form-item">
						<span class="form-item-span" style="color: #999;">审核结束时间</span>
						<span>
							<uni-datetime-picker type="date" :clear-icon="false" 
								v-model="endDate" @maskClick="maskClick" class="date"></uni-datetime-picker>
						</span>
					</view>
					<view class="form-item">
						<span class="form-item-span">3.方案预演</span>
					</view>
					<view class="form-item">
						<span class="form-item-span">主讲人</span>
						<input class="form-input" placeholder="输入文字"/>
					</view>
					<view class="form-item">
						<span class="form-item-span">参与预演人员</span>
						<input class="form-input" placeholder="输入文字"/>
					</view>
					<view class="form-item">
						<span class="form-item-span">预演记录</span>
					</view>
					<view class="form-item form-text">
						<input class="text" placeholder="输入文字"/>
					</view>
					<view class="form-item">
						<span class="form-item-span">4.设计师谈单状态</span>
					</view>
					<view class="form-item">
						<span class="form-item-span">5.转单结果</span>
						<span class="form-item-input">转单状态</span>
					</view>
					<button class="button">提交</button>
				</form>
			</view>
		</view>		
	</view>
	
</template>

<script setup>
import { ref } from 'vue';

const current = ref(3);


const startDate = ref('');
const endDate = ref('');
const maskClick = () => {
	
}

const items = ref(['基本信息', '客情跟踪', '量房信息','转单信息']);
const onClickItem = (e) => {
	if (current.value !== e.currentIndex) {
		current.value = e.currentIndex
		}
	}
const customerInfo = ref({
  customerId: '',
  orderId: '',
  status: '',
  type: '',
  name: '',
  gender: '',
  phone: '',
  idNumber: '',
  propertyName: '',
  layout: '',
  area: ''
});
</script>
<style>
	page{
		background-color: #fff;
		overflow: hidden; 
	}
	.form-item {
		position: relative;
		width: 100%;
		height: 80rpx;
		border: #F2F2F2 solid 1rpx;
	}
	.form-item-span {
		position: absolute;
		top: 24rpx;
		left: 30rpx;
		font-size: 24rpx;
	}
	.linked {
		color: #CC6633;
	}
	.form-item-input {
		position: absolute;
		top: 24rpx;
		right: 20rpx;
		font-size: 24rpx;
		color: #CC6633;
	}
	.date {
		display: inline-block;
		position: absolute;
		top: 1rpx;
		right: 20rpx;
		width: 250rpx !important;
	}
	.form-text{
		height: 300rpx;
	}
	.text {
		padding-left: 20rpx;
		padding-top: 10rpx;
		font-size: 24rpx;
	}
	.form-input {
		position: absolute;
		top: 24rpx;
		right: 0rpx;
		font-size: 24rpx;
	}
	.button {
		position: absolute;
		right: 1rpx;
		width: 100%;
		height: 60rpx;
		background-color: #2191f7;
		font-size: 24rpx;
		color: #fff;
	}
</style>